 <!-- 系统日志 -->
<template>
  <div>  
    <el-form :inline="true" label-position="left">
       <div class="top">
        <el-row>
          <el-form-item label="创建日期">
            <el-date-picker
              v-model="form.logTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
            <el-form-item label="日志类型">
            <el-select v-model="form.logType" filterable clearable placeholder="请选择" default-first-option>
                <el-option v-for="item in logTypeList" :key="item.logType" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请求地址">
              <el-input v-model="form.url" placeholder="请求地址" style="width:215px"></el-input>
            </el-form-item>
            <el-form-item label="切面类型">
              <el-select v-model="form.targetType" filterable clearable placeholder="请选择" default-first-option>
                <el-option v-for="item in targetTypeList" :key="item.targetType" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="form.logTitle" placeholder="标题" style="width:215px"></el-input>
            </el-form-item>
            <div style="float:right">  
              <el-button type="primary" @click="btnPageList" icon="my-search" class="mL57">查询</el-button>
              <el-button type="primary"  @click="btnReset"  icon="my-spinner11">重置</el-button>
          </div>
          </el-row>
        </div>
    </el-form>

    <!-- 列表 -->
    <el-row>
      <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false"  style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="logType" label="日志类型"></el-table-column>
        <el-table-column prop="logTitle" label="日志标题"></el-table-column>
        <el-table-column prop="url" label="请求地址"></el-table-column>
        <el-table-column prop="requestMessage" label="请求参数">
          <template slot-scope="scope" v-if="scope.row.requestMessage != ''">
					<el-popover trigger="hover" width="250" placement="top-start">
						<p>{{ scope.row.requestMessage }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.requestMessage }}</el-tag>
						</div>
					</el-popover>
				</template>
        </el-table-column>
        <el-table-column prop="resultMessage" label="返回参数">
         <template slot-scope="scope" v-if="scope.row.resultMessage != ''">
					<el-popover trigger="hover" width="700" placement="top-start">
						<p>{{ scope.row.resultMessage }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.resultMessage }}</el-tag>
						</div>
					</el-popover>
				</template>
        </el-table-column>
        <el-table-column prop="exception" label="异常">
          <template slot-scope="scope" v-if="scope.row.exception != ''">
					<el-popover trigger="hover" width="250" placement="top-start">
						<p>{{ scope.row.exception }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.exception }}</el-tag>
						</div>
					</el-popover>
				</template>
        </el-table-column>
        <el-table-column prop="targetType" label="切面类型" :formatter="targetTypeFormat"></el-table-column>
        <el-table-column prop="cT" label="创建时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="costTime" label="耗时(ms)"></el-table-column>
        <el-table-column prop="createUser" label="操作人"></el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="form.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { liveSystemAPI } from "@/api/index";
export default {
  data() {
    return {
      loginUser: {
        userId: this.$root.userId,
        username: this.$root.username,
        email: this.$root.email
      },
      loadingTableData: false,
      form: {
        pageFlag: 1,
        logTime: [],
        logType: null,
        logTitle: null,
        targetType:null,
        url: null,
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      tempPage:0,
      pageFlag:1,
      tableData: [], //列表
      logTypeList: [
        {
          value: "info",
          label: "INFO"
        },
        {
          value: "error",
          label: "ERROR"
        }
      ],
      targetTypeList: [
        {
          value: 0,
          label: "CONTROLLER"
        },
        {
          value:1,
          label: "SERVICE"
        }
      ]
    };
  },
  created: function() {
    this.getDay(-7);
  },
  methods: {
    /**每页显示条数更改 */
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.btnPageList();
    },
    /**跳转、下一页等 */
    handleCurrentChange(pageIndex) {
      if(this.tempPage != 0){
        if(pageIndex == (this.tempPage+1)){
          this.pageFlag = 1
        }else  if(pageIndex == (this.tempPage-1)){
          this.pageFlag = 2
        }else{
          this.pageFlag = 3
        }
      }
      this.form.pageIndex = pageIndex;
      this.btnPageList();
    },
    /**重置 */
    btnReset() {
      this.form.url = null;
      this.form.logTitle = null;
      this.form.logType = null;
      this.form.targetType = null;
      this.form.logTime = [];
      this.form.pageIndex = 1;
      this.tempPage = 0,
      this.pageFlag = 1,
      this.tableData = [],
      this.btnPageList();
    },
    /**查询 */
    btnPageList() {
      this.loadingTableData = true;

      var ct = ''
      var objectId = ''
      if(this.tableData!=null && this.tableData.length>0){
        if(this.pageFlag == 1){
          ct = this.tableData[this.tableData.length-1].ct
          objectId = this.tableData[this.tableData.length-1].id
        }else if(this.pageFlag == 2){
          ct = this.tableData[0].ct
          objectId = this.tableData[0].id
        }
      }
      let param = {
        ct:ct,
        id:objectId,
        pageFlag: this.pageFlag,
        logTime: this.form.logTime,
        logType: this.form.logType,
        logTitle: this.form.logTitle,
        targetType: this.form.targetType,
        url: this.form.url,
        pageIndex: this.form.pageIndex,
        pageSize: this.form.pageSize
      }
      
      //请求后台
      liveSystemAPI.getLiveSystemLogPage(
        param,
        res => {
          if (res) {
            this.loadingTableData = false;
            //赋值
            this.tableData = res.records;
            this.form.total = res.total;
            this.form.pageIndex = res.page.pageIndex;
            this.form.pageSize = res.page.pageSize;
            this.tempPage =  this.form.pageIndex
          }
        },
        () => {
          this.loadingTableData = false;
        }
      );
    },
    /**日期转换 */
    dateFormat: function(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return dateFormatLong(date);
    },
    targetTypeFormat:function(row,column) {
      let targetType = row[column.property];
      if (targetType == undefined ) {
        return "无";
      } else if (targetType == 0) {
        return "CONTROLLER";
      } else if (targetType == 1) {
        return "SERVICE";
      }
    },
    //获取当前时间的前*天日期
    //返回数据 ：['前*天（****-**-**）','当前日期（2018-11-20）']
    getDay:function(num) {
      var currentDate = new Date(),
      stamp = currentDate.setDate(currentDate.getDate() + num);//获取前7天的时间戳
      this.form.logTime =  [dateFormatShort(stamp),new Date()];

      //初始化资产计划列表数据
      this.btnPageList();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mL57 {
  margin-left: 57px !important;
}
.el-tag {
  background-color: rgba(255, 255, 255, 0.2);
  border: 0px;
}
.top {
  margin-left: 10px;
  line-height: 40px;
  font-size: 22px;
  font-weight: 400;
}
</style>
